<!--
 * @Description: 团队选择组件
-->
<template>
  <el-dialog v-model="visible" title="选择团队成员" width="80%" @close="handleClose">
    <el-checkbox v-model="checkAll" @change="clickAll">
          全部
        </el-checkbox>
    <div class="team-list">
      
      <div 
        v-for="item in props.list" 
        :key="item.fUserId"
        :class="['team-item', { checked: item.checked }]"
        @click="toggleTeamMember(item)"
      >
        <el-checkbox v-model="item.checked" @change="toggleTeamMember(item)">
          {{ item.fUserName }}
        </el-checkbox>
      </div>
    </div>
    
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElDialog, ElButton, ElCheckbox } from 'element-plus'

interface Props {
  show: boolean
  list: any[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  onClose: []
  onConfirm: []
}>()

const visible = computed({
  get: () => props.show,
  set: (value) => {
    if (!value) {
      emit('onClose')
    }
  }
})
const checkAll = ref(true)
const teamList = ref([])
teamList.value = [...props.list]
watch(()=>props.list,()=>{
  console.log('teamList.value',teamList.value);
  
  // teamList.value = props.list
   let sta = props.list.some(key=>!key.checked)
  console.log('sta',sta);
  
  checkAll.value = !sta
},{
  deep:true
})
watch(()=>teamList.value,()=>{
  
  let sta = teamList.value.some(key=>!key.checked)
  console.log('sta',sta);
  
  checkAll.value = !sta
})

const toggleTeamMember = (item: any) => {
  item.checked = !item.checked
}

const handleClose = () => {
  emit('onClose')
}

const handleConfirm = () => {
  emit('onConfirm')
}
function clickAll() {
  props.list.map(key=>{
    key.checked = checkAll.value
  })
}
</script>

<style scoped lang="less">
.team-list {
  // max-height: 400px;
  // overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}

.team-item {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  
  &:hover {
    background-color: #f9f9f9;
  }
  
  &:last-child {
    border-bottom: none;
  }
}
</style>
